<template>
  <view class="tui-skeleton">
    <!-- <view v-if="type===0" id="dates" ref="dates" class="dates padding-lr-30 padding-tb-24 flex-row">
      <view v-for="(val,key) in dates" :key="key" :class="{'date-active':key===dateInx}" class="dates-item margin-right-20 flex-row flex-center" @click="dateInx = key">
        <text class="text-24" :class="['color-' + (key===dateInx ? 'white' : 't1')]">{{ val.label }}{{ val.count ? `(${val.count})` : '' }}</text>
      </view>
    </view> -->
    <!-- #ifndef APP-NVUE -->
    <scroll-view
      v-if="list.length"
      class="flex-column"
      :style="{height:scrollHeight+'px'}"
      :refresher-triggered="refresh"
      lower-threshold="50"
      refresher-enabled
      enable-back-to-top
      scroll-y
      @scrolltolower="nextPage"
      @refresherrefresh="refresherrefresh"
    >
      <view class="flex-column padding-lr-30">
        <view v-for="(item, index) in list" :key="index">
          <order-card :type="type === 1 && item.orderType ? 'hook' : 'order'" :order-type="type" :item="item" :margin-top="!type ? (index ? '30rpx' : '0') : '30rpx'" @showModel="showModel" />
        </view>
      </view>
      <l-footer :has-more="hasMore" />
    </scroll-view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <list v-if="list.length" class="flex-column flex-item" :show-scrollbar="false" :scrollable="true" :offset-accuracy="5" loadmoreoffset="100" :bounce="false" fix-freezing="true">
      <cell v-for="(item, index) in list" :key="index">
        <view class="padding-lr-30">
          <order-card :type="type === 1 && item.orderType ? 'hook' : 'order'" :order-type="type" :item="item" :margin-top="!type ? (index ? '30rpx' : '0') : '30rpx'" @showModel="showModel" />
        </view>
      </cell>
      <cell @appear="nextPage">
        <l-footer :has-more="hasMore" />
      </cell>
    </list>
    <!-- #endif -->
    <view v-else :style="{height:scrollHeight+'px'}" :class="showSkeleton ? '' : 'no-list'">
      <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
	  <view v-else>
		  <view class="no-rob" v-if="current == 2">
		  	<view class="no-rob-title">
		  		暂未开通此功能
		  	</view>
			<view class="go-opent-rob" @click="jump('/user/set-rob-order/set-rob-order')">
				去开启
			</view>
		  </view>
	  	<l-no-data v-else type="order" text="暂无数据" />
	  </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/api/request'
import { mapGetters } from 'vuex'
import { getElementInfo } from '@/common/util'
import { dateFormat } from '@/common/util'
import { getOrderConfirmPageForCompanyMp, getOrderPageForCompanyMpSize, getOrderPageForCompanyMp } from '@/common/api/order'
import { preloadData } from '../../index'
const oneDay = 1000 * 60 * 60 * 24
export default {
  name: 'OrderPage',
  props: {
	orderType:{
	  type:Number,
	  default:1
	},
    type: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
	marginTop: {
		type: Number,
		default: 0
	},
	current:{
		type:Number,
		default:0
	}
  },
  data() {
    return {
      preloadData,
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      showSkeleton: true,
      top: 0,
      refresh: false,
      dateInx: 0,
      dates: [
        { label: '全部', value: '', count: 0 },
        { label: '今天', value: 0, count: 0 },
        { label: '明天', value: 1, count: 0 },
        { label: '后天', value: 2, count: 0 }
      ],
      scrollHeight: 0,
	  // marginTop: 0
    }
  },
  computed: {
    date() {
      const val = this.dates[this.dateInx].value
      if (val !== '') {
        const date = new Date().getTime() + oneDay * val
        return dateFormat(date)
      }
      return ''
    },
    ...mapGetters({
      userId: 'userId'
    })
  },
  watch: {
	  dateInx(newval){
		  console.log(newval)
	  },
	  current(newVal){
		  this.getData()
	  },
    date() {
      this.getData()
    },
    height() {
      this.getHeight()
    }
  },
  methods: {
    getHeight() {
		this.scrollHeight = this.height
 //      if (this.type) {
 //        this.scrollHeight = this.height
 //      } else {
 //        getElementInfo('.driver', res => {
 //          this.scrollHeight = this.height
	// 	  // this.marginTop = res.height + 50
 //        }, this)
	// // let _this = this
	// // 	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
	// // 		success(res) { //成功回调函数
	// // 			let wHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
	// // 			let titleH=uni.createSelectorQuery().select(".driver"); //想要获取高度的元素名（class/id）
	// // 			titleH.boundingClientRect(data=>{
	// // 				console.log("data=======", data)
	// // 				_this.scrollHeight=wHeight - data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
	// // 				// _this.marginTop = data.height
	// // 			}).exec()
	// // 		}
	// // 	})
 //      }
    },
    getData() {
      this.reloadList()
      this.getSize()
    },
    showModel(e) {
      this.$emit('showModel', e)
    },
    refresherrefresh() {
      this.refresh = true
      this.reloadList()
    },
	// refreshPulling() {
	// 	let _this = this;
	// 	if(!this.refresh){
	// 		//下拉加载，先让其变true再变false才能关闭
	// 		this.refresh = true; 
	// 		//关闭加载状态 (转动的圈)，需要一点延时才能关闭
	// 		setTimeout(() => {
	// 			uni.stopPullDownRefresh()
	// 			_this.refresh = false;
	// 		},2000)
	// 	}
	// },
    reloadList() {
      this.page = 1
      this.hasMore = true
      this.getOrderList()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getOrderList()
      }
    },
    clear() {
      this.page = 1
      this.list = this.list.slice(0, this.pageSize * this.page)
      this.top = this.top ? 0 : 1
    },
    async getOrderList() {
      let api = getOrderPageForCompanyMp
      let send = {
        status: this.type,
        page: this.page,
        size: this.pageSize,
        startTime: this.date,
        endTime: this.date,
        id: this.userId,
      }
      if (this.type === 1) {
        api = getOrderConfirmPageForCompanyMp
        send = {
          status: 0,
          page: this.page,
          size: this.pageSize,
          id: this.userId,
        }
      }
	  
	  if(this.$parent.typeofJudge == 3){
		  send.orderType = 3
	  }else if(this.$parent.typeofJudge == 1){
		  send.orderType = 1
	  }
      const [err, res] = await api(send)
      uni.stopPullDownRefresh()
	  this.refresh = false
      this.showSkeleton = false
      if (!request.errorCheck(err, res)) return false

      const data = res.data.data
      let list = data.records
      if (!list) list = []
      if (list.length < this.pageSize) this.hasMore = false

      if (this.page === 1) this.list = list
      else this.list.push(...list)

      if (this.type === 1) {
        this.$emit('getSize', {
          type: this.type,
          size: Number(data.total)
        })
      }
	 //  setTimeout(() => {
		// this.refresh = false  
	 //  },1200)
    },
    async getSize() {
		let send = {}
		if(this.$parent.typeofJudge == 3){
				  send.orderType = 3
		}else if(this.$parent.typeofJudge == 1){
				  send.orderType = 1
		}
      const [err, res] = await getOrderPageForCompanyMpSize(send)
      if (!request.errorCheck(err, res)) return false
      const data = res.data.data
      this.dates[0].count = parseInt(data.total)
      this.dates[1].count = parseInt(data.todayNum)
      this.dates[2].count = parseInt(data.tomorrowNum)
      this.dates[3].count = parseInt(data.theDayAfterTomorrowNum)
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(tb,24);

.dates {
  position: fixed !important;
  top: 160rpx;
  z-index: 99;
}
.scrollTop {
	margin-top: 270rpx;
}

.dates-item{
  height: 56rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  border: 2rpx solid $color-border;
  padding:0 18rpx;
}
.date-active{
  background:$color-primary;
  border-color:$color-primary;
}
.no-list{
	display: flex;
	align-items: center;
	flex-direction: row !important;
	justify-content: center;
}
.no-rob{
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	.no-rob-title{
		font-size: 40rpx;
		font-weight: 400;
	}
	.go-opent-rob{
		width: fit-content;
		padding: 30rpx 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		background-color: #db8a25;
		color: #FFFFFF;
		border-radius: 18rpx;
		margin-top: 20rpx;
	}
}
</style>
